<template>
  <StudentLayout>
    <el-button :icon="Plus" class="mb-4" type="primary" @click="editMenuPop()">新增导航</el-button>
    <el-menu
      :default-openeds="openMenu"
      class="el-menu-vertical-demo"
    >
      <template v-for="(item, index) in menuListData">
        <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.en_name" :key="index" class="odd:bg-gray-100">
          <template #title>
            <div class="flex justify-between" style="width: 100%">
              <span>{{item.name}}</span>
              <div class="alignMiddle">
                <el-button link type="primary" @click="editMenuPop(item)">编辑</el-button>
                <el-popconfirm title="确认删除吗?"
                  @confirm="delMenuFun(item)"
                >
                  <template #reference>
                    <el-button link type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </template>
          <el-menu-item
            class="flex justify-between"
            v-for="(child, indexs) in item.children"
            :index="child.en_name"
            :key="indexs">
            <span>{{child.name}}</span>
            <div class="alignMiddle">
              <el-button link type="primary" @click="editMenuPop(child, item.en_name)">编辑</el-button>
            <el-popconfirm title="确认删除吗?"
               @confirm="delMenuFun(child,item.en_name)"
            >
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
            </div>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.en_name" class="odd:bg-gray-100 flex justify-between">
          <span>{{item.name}}</span>
          <div class="alignMiddle">
            <el-button link type="primary" @click="editMenuPop(item)">编辑</el-button>
            <el-popconfirm title="确认删除吗?"
               @confirm="delMenuFun(item)"
            >
              <template #reference>
                <el-button link type="danger">删除</el-button>
                <!-- <el-button link :disabled="item.is_enable === 1" type="danger">删除</el-button> -->
              </template>
            </el-popconfirm>
          </div>
        </el-menu-item>
      </template>
    </el-menu>

    <el-dialog v-model="dialogFormVisible" :title="isEdit ? '编辑导航' : '新增导航'" width="500">
      <el-form :model="form">
        <el-form-item label="导航父节点" label-width="140">
          <el-select v-model="form.parent" placeholder="请选择父节点">
            <el-option v-for="(item, index) in menuListData"
              :key="index"
              :label="item.name"
              :value="item.en_name" />
          </el-select>
        </el-form-item>
        <el-form-item label="导航中文名称" label-width="140" required>
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="导航英文名称" label-width="140" required>
          <el-input :disabled="isEdit === true" v-model="form.en_name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="insertMenuFun()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </StudentLayout>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import StudentLayout from '@/layouts/StudentLayout.vue'
import  { getMenuList, insertMenu, delMenu, editMenu } from '@/composables/school'

const openMenu = ref([])
const menuListAjax = () => {
  return getMenuList().then(res => {
    return res.data
  })
}
const { data: menuListData } = await useAsyncData('menu', async () => {
  return await menuListAjax()
})
if (menuListData.value) {
  menuListData.value.forEach(el => {
    if(el.children) {
      openMenu.value.push(el.en_name)
    }
  })
}
const isEdit = ref(false)
// 编辑
const editMenuPop = (item, parent) => {
  form.parent = ''
  form.name = ''
  form.en_name = ''
  isEdit.value = false
  if (item) {
    isEdit.value = true
    form.parent = parent
    form.name = item.name
    form.en_name = item.en_name
  }
  dialogFormVisible.value = true
}
// 新建导航
const dialogFormVisible = ref(false)
const form = reactive({
  parent: '',
  name: '',
  en_name: ''
})
const insertMenuFun = async () => {
  if (isEdit.value || form.parent) {
    form.isEdit = isEdit.value ? true : false
    await editMenu(form).then(async res => {
      ElMessage({
        message: '编辑成功',
        type: 'success',
      })
      menuListData.value = await menuListAjax()
      dialogFormVisible.value = false
    })
  } else {
    await insertMenu(form).then(async res => {
      if (res.data) {
        ElMessage({
          message: '新增成功',
          type: 'success',
        })
        menuListData.value = await menuListAjax()
        dialogFormVisible.value = false
      }else {
        ElMessage({
          message: '新增失败',
          type: 'error',
        })
        dialogFormVisible.value = false
      }
    })
  }
}
// 删除导航
const delMenuFun = async (data, parent) => {
  const {name, en_name} = data
  await delMenu({name, en_name, parent}).then(async res => {
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
    menuListData.value = await menuListAjax()
  })
}

</script>
<style scoped>
.alignMiddle button{
  vertical-align: middle;
}
</style>